<template>
    <div class="btn">
       <Header>
		<span>找回密码</span>
	   </Header>
		<section>
				<div class="btn-tel">
					<input type="text" v-model="userPwd" placeholder="请输入新的密码" />
				</div>
				<div class="btn-btn" @click="submitBtn">确认</div>
				
		</section>
		<Tabbar></Tabbar>
    </div>
</template>
<script>
import  Tabbar  from "@/components/common/Tabbar.vue";
import  Header  from "@/views/login/Header.vue";
import { Toast } from 'mint-ui';
import http from '@/common/api/request.js';
export default{
	data(){
		return{
			userPwd:'',
            rules:{
				//密码验证规则
				userPwd:{
					// 密码至少为八个字符,并且至少有一个字母和一个数字
					// rule:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
					rule:/^\w{6,12}$/,
					msg:'密码不能为空,并且要求6-12位',
				}
			}
        }
	},
	components: {
		Tabbar,
		Header,
	},
	methods:{
        submitBtn(){
            if( !this.validate('userPwd')) return;
            //确认修改
            http.$axios({
                ul:'api/recovery',
                method:'POST',
                data:{
                    phone:this.$route.query.phone,
                    pwd:this.userPwd,
                }
            }).then(res=>{
				Toast('修改成功,重新登录');
				if( res.success ){
					this.$router.push({
						path:'/login',
					})
				}
            })
        },
        //验证信息提示
		validate( key ){
			let bool = true;
			if( !this.rules[key].rule.test( this[key]) ){
				//提示信息
				Toast(this.rules[key].msg);
				bool = false;
				return false;
			}
			return bool;
		},
        
	},
	
}
</script>

<style scoped>
.btn{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
section{
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	align-items: center;
}
section div{
	margin: 0.625rem 0;
	width: 20.9375rem;
	height: 2.75rem;
	
}
.btn-tel{
	margin-top: 1.25rem;
}
.btn-tel input{
	width: 100%;
}
input{
	box-sizing: border-box;
	padding: 0 0.625rem;
	background-color: #fff;
	line-height: 2.75rem;
	border: 0.0625rem solid #ccc;
	border-radius: 0.375rem;
	
	
}
.btn-code {
	display: flex;	
}
.btn-code input{
	flex: 1;
}
.btn-code button{
	padding: 0 1.25rem;
	line-height: 2.75rem;
	color: #fff;
	background-color: green;
	border: 0;
	border-radius: 0.375rem;
}
.btn-btn{
	line-height: 2.75rem;
	color: #fff;
	text-align: center;
	background-color: green;
	border-radius: 0.375rem;
	
}

</style>